<template>
    <div class="put-process">
        <div class="title col-item flex-center">
            <div class="step">
                阶段
            </div>
            <div class="time">
                投放开始时间
            </div>
            <div class="week">
                投放周期
            </div>
        </div>
        <div v-for="(item, i) in processArray" :key="item.step" class="col-item">
            <div class="step">
                {{ item.step }}
            </div>
            <div class="time">
                {{ item.startTime }}
            </div>
            <div class="week">
                <Stepper
                    v-model="item.week"
                    min="2"
                    max="60"
                    integer
                    input-width="40px"
                    button-size="24px"
                    @change="onStepper"
                />
                <i v-if="i > 2" class="del iconfont icon-shanchu" @click="onDec"></i>
            </div>
        </div>
    </div>
    <div class="add-btn">
        <a href="javascript:;" @click="onAdd">+ 新增一阶段投放</a>
    </div>
</template>

<script lang="ts" setup>
import { ref, onActivated, onMounted, watch } from 'vue';
import { Stepper, Toast as myToast } from 'vant';
import dayjs from 'dayjs';
import { convertToChineseNumeral } from '@/utils';
import { IProcessInfo } from '../preventForgeting';

const props = defineProps({
    startTime: {
        type: String,
        default: '',
    },
});
const emit = defineEmits(['onProcssArray']);

const processArray = ref<IProcessInfo[]>([]);
function updateProcessArray() {
    processArray.value.forEach((processItem: IProcessInfo) => {
        processItem.endTime = dayjs(processItem.startTimeReal)
            .add(processItem.week, 'week')
            .subtract(1, 'day')
            .format('YYYY-MM-DD') as unknown as string;
    });
}

/* 规则：
    1.默认显示三个阶段
    2.第一阶段 为输入的开始时间
    3.从第二阶段开始 每一阶段的开始y月份为第一阶段月份 + 12/阶段数
*/

function setProcessInfo(stepTotal: number) {
    processArray.value = [];
    const firstProcess: IProcessInfo = {
        step: '第一阶段',
        week: 2,
        startTime: props.startTime as unknown as string,
        endTime: '',
        startTimeReal: props.startTime as unknown as string,
    };
    processArray.value.push(firstProcess);
    for (let i = 1; i < stepTotal; i++) {
        if (props.startTime as unknown as string !== '请选择') {
            const month = dayjs(props.startTime).month();
            const addMonth = Math.floor(12 / stepTotal) * i;
            let xcSaturday = '';
            const day = dayjs(props.startTime).add(addMonth,'month').day();
            if(day===6) {
                xcSaturday = dayjs(props.startTime).add(addMonth,'month').add(7,'day').format('YYYY-MM-DD');
            } else {
                xcSaturday = dayjs(props.startTime).add(addMonth,'month').add(6-day,'day').format('YYYY-MM-DD');
            }
            const stepTem: IProcessInfo = {
                step: `第${convertToChineseNumeral(i + 1)}阶段`,
                week: 2,
                startTime:
                    dayjs(props.startTime)
                        .month(month + addMonth)
                        .format('YYYY年MM') as unknown as string + '月左右',
                endTime: '',
                startTimeReal: xcSaturday,
            };
            processArray.value.push(stepTem);
        }
    }

    updateProcessArray();
    emit('onProcssArray', processArray.value);
}
watch(
    () => props.startTime,
    (val) => {
        setProcessInfo(3);
    }
);

onActivated(() => {
    // console.log('home keep alive');
});
onMounted(() => {
    // console.log('---son on mount..');
    setProcessInfo(3);
});

function onAdd() {
    if (processArray.value.length >= 12) {
        myToast('最多增加12个阶段');
        return;
    }
    setProcessInfo(processArray.value.length + 1);
}
function onDec() {
    setProcessInfo(processArray.value.length - 1);
}

let timer: object;
function onStepper(val: number) {
    if(timer) {
        clearTimeout(timer as unknown as number);
    }
    timer = setTimeout(() => {
        if (val) {
            if (val < 2) {
                myToast('为保证投放效果,最少投放周期为2周');
            } else if (val > 60) {
                myToast('周期不能超过60');
            } else {
                updateProcessArray();
                emit('onProcssArray', processArray.value);
            }
        }
    }, 400);

}
// watch(()=>processArray.value,(val)=>{
//     emit('onProcssArray',val);
// });
</script>

<style lang="scss" scoped>
.put-process {
    border: 1px solid #eee;
    border-top: 0;
    border-bottom: 0;
    color: #333333;
    font-size: 12px;
    .title {
        background-color: #f8f8f8;
    }
    .col-item {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @mixin pd($pd: 5px) {
        padding-left: $pd;
    }

    .step {
        flex: 30%;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        padding-left: 5px;
        @include pd(10px);
    }

    .time {
        flex: 35%;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        @include pd(10px);
    }

    .week {
        flex: 35%;
        border-bottom: 1px solid #eee;
        @include pd(10px);

        display: flex;
        align-items: center;
        .del {
            font-size: 12px;
            margin-left: 5px;
            margin-top: -17px;
            height: 20px;
        }
    }

    :deep(.van-stepper) {
        input {
            background-color: #fff;
            border: 1px solid #eee;
            margin: 0;
            border-left: 0;
            border-right: 0;
            font-size: 12px;
            width: 35px !important;
            height: 20px !important;
        }

        button {
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 4px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            width: 20px !important;
            height: 20px !important;
        }

        button[class~="van-stepper__plus"] {
            border-radius: 4px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}
.add-btn {
    text-align: center;
    margin-top: 10px;
}
</style>
